<template>
	<view class="recpo">
		<view class="recpoTop">
			<text @click="getnav('/pages/etailedArticle/etailedArticle','推荐有礼活动规则')">活动规则</text>
		</view>
		<view class="recpoTitle">
			<text>推荐好友下单可领现金</text>
		</view>
		<view class="recpoImg">
			<image src="https://www.kmdj2018.com/Uploads/zfb/l1.png" mode="aspectFit"></image>
		</view>
		<view class="recpoPrice">
			<image src="https://www.kmdj2018.com/Uploads/zfb/l2.png" mode="aspectFit"></image>
			<view :class="type == 1?'recpoPriceVone':''" @click="getTab(1)">
				<view>
					{{TUiUser.type1}}
					<text>元</text>
				</view>
				<view>奖励在路上</view>
			</view>
			<view :class="type == 2?'recpoPriceVtwo':''" @click="getTab(2)">
				<view>
					{{TUiUser.type2}}
					<text>元</text>
				</view>
				<view>已获得</view>
			</view>
			<view :class="type == 3?'recpoPriceVthree':''" @click="getTab(3)">
				<view>
					{{TUiUser.type3}}
					<text>元</text>
				</view>
				<view>已发放</view>
			</view>
		</view>
		<view class="recpoFlex" v-if="type == 1">
			<view class="recpoFlexTitle">
				<text>用户昵称</text>
				<text>下单时间</text>
				<text>预计获得奖励金额</text>
			</view>
			<view class="recpoFlexFor" v-for="(item,key) in list" :key="key">
				<text>{{item.name || '暂无'}}</text>
				<text>{{timeShijianall(item.add_time*1000)}}</text>
				<text>￥{{item.price}}</text>
			</view>
			<!-- <view class="recpoFlexFor">
				<text>123****1235</text>
				<text>2022/4/3  10:40</text>
				<text>
					￥1.2
				<br>
				（用户已退款）
				</text>
			</view> -->
		</view>
		<view class="recpoFlex" v-if="type == 2">
			<view class="recpoFlexTitle">
				<text>用户昵称</text>
				<text>订单完成时间</text>
				<text>获得奖励金额</text>
			</view>
			<view class="recpoFlexFor" v-for="(item,key) in list" :key="key">
				<text>{{item.name || '暂无'}}</text>
				<text>{{timeShijianall(item.add_time*1000)}}</text>
				<text>￥{{item.price}}</text>
			</view>
		</view>
		<view class="recpoFlex" v-if="type == 3">
			<view class="recpoFlexTitle">
				<text>用户昵称</text>
				<text>奖励领取金额</text>
				<text>领取奖励金额</text>
			</view>
			<view class="recpoFlexFor" v-for="(item,key) in list" :key="key">
				<text>{{item.name || '暂无'}}</text>
				<text>{{timeShijianall(item.add_time*1000)}}</text>
				<text>￥{{item.price}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:3,
				TUiUser:{
					type1:0,
					type2:0,
					type3:0,
				},
				list:[]
			};
		},
		onLoad(e) {
			console.log(e.data)
			if(e.data){
				this.type = e.data
			}
			this.init()
		},
		methods:{
			getTab(type){
				this.type = type
				this.init()
			},
			init(){
				this.$request("User/TUiUser", {
					data: {
							
					},
					isLoad: false
				}).then(res => {
					this.TUiUser = res
				})
				this.$request("User/UserPrice_list", {
					data: {
						type:this.type
					},
					isLoad: false
				}).then(res => {
					this.list = res.result
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
//  https://www.kmdj2018.com/Uploads/zfb/rebg.png
.recpo{
	height: 100vh;
	background-image:url('https://www.kmdj2018.com/Uploads/zfb/rebg.png');
	 background-size: 100%;
	  vertical-align: middle;
}
.recpoTop{
	padding: 48rpx 32rpx 0 0;
	text-align: right;
	text{
		border: 1rpx solid #333;
		padding: 10rpx 26rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		border-radius: 100rpx;
	}
}
.recpoTitle{
	text-align: center;
	font-size: 68rpx;
	font-weight: bold;
	padding: 50rpx 0;
}
.recpoPrice{
	margin: 0 32rpx;
	min-height: 320rpx;
	background-color: #fff;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	margin-top: -180rpx;
	position: relative;
	>view{
		margin-top: 55rpx ;
		margin-bottom: 20rpx ;
		width: 200rpx;
		height: 220rpx;
		border-radius: 40rpx;
		text-align: center;
		>view:nth-child(1){
			margin-top: 60rpx;
			font-size: 48rpx;
			font-weight: bold;
			>text{
				font-size: 28rpx;
			}
		}
		>view:nth-child(2){
			font-size: 28rpx;
			color: #333;
			margin-top: 28rpx;
		}
	}
	>image{
		width: 290rpx;
		height: 142rpx;
		position: absolute;
		left: 240rpx;
		top: -82rpx;
	}
}
.recpoPriceVone{
	background-color: rgba(255, 242, 206, .3);
	>view:nth-child(1){
		color: #E5A803 !important;
		>text{
			color: #E5A803!important;
		}
	}
}
.recpoPriceVtwo{
	background-color: rgba(225, 238, 255, .3);
	>view:nth-child(1){
		color: #1078FF !important;
		>text{
			color: #1078FF!important;
		}
	}
}
.recpoPriceVthree{
	background-color: rgba(231, 225, 255, .3);
	>view:nth-child(1){
		color: #5C37E0 !important;
		>text{
			color: #5C37E0!important;
		}
	}
}
.recpoFlex{
	margin-top: 40rpx;
	.recpoFlexTitle{
		padding: 20rpx 0;
		display: flex;
		text-align: center;
		>text{
			font-weight: bold;
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}
	}
	.recpoFlexFor{
		padding: 34rpx 0;
		display: flex;
		text-align: center;
		border-bottom: 1rpx solid #333333;
		>text{
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}
	}
}
.recpoImg{
	padding: 0 40rpx;
	margin-top: -130rpx;
	image{
		width: 100%;
	}
}
</style>
